DOM生成用便利ツール メソッドチェーン版
✂ from DOM生成用便利ツール
code:一括コピー用.js
(()=>{let e=HTMLElement.prototype;e.c=function(e,t){return this.appendChild(h2(e,t))},e.s=function(e,t){return this.append(h2(e,t)),this},e.p=function(){return this.parentElement}})();const h2=(e,t)=>{if(void 0===t)if(e instanceof HTMLElement)var n=e;else n=new Text(e);else n=document.createElement(e);for(let e in t)n.setAttribute(e,te);return n};const svg=(e,t)=>{if(void 0===t)if(e instanceof SVGElement)var n=e;else n=new Text(e);else n=document.createElementNS("http://www.w3.org/2000/svg",e);for(let e in t)n.setAttribute(e,te);return n};(()=>{let e=SVGElement.prototype;e.c=function(e,t){return this.appendChild(svg(e,t))},e.s=function(e,t){return this.append(svg(e,t)),this},e.p=function(){return this.parentElement}})();
メソッドチェーン版2(351バイト)
1. HTMLElementを拡張する
(()=>{let e=HTMLElement.prototype;e.c=function(e,t){return this.appendChild(h2(e,t))},e.s=function(e,t){return this.append(h2(e,t)),this},e.p=function(){return this.parentElement}})();
長い版
code:recursive.js
(()=>{
const element___proto__ = HTMLElement.prototype;
element___proto__.c = function (arg1, attributes) {
return this.appendChild(h2(arg1, attributes));
};
element___proto__.s = function (arg1, attributes) {
this.append(h2(arg1, attributes));
return this;
};
element___proto__.p = function () {
return this.parentElement;
};
})()
2. 本体
const h2=(e,t)=>{if(void 0===t)if(e instanceof HTMLElement)var n=e;else n=new Text(e);else n=document.createElement(e);for(let e in t)n.setAttribute(e,t[e]);return n};
使い方
h2()でprototype拡張済みのHTMLElementを作る
引数
h2(タグ名,{属性名:属性値...}):要素を作って属性をセットする
h2(HTMLElement)既存の要素のprototypeを拡張する
h2(string):textnodeを作る
メソッドチェーン先のものも全て拡張済みのhtmlelementを返す
.c()で子要素を作り作った要素を返す
意味:Children(子要素)の頭文字
引数はhmc2()の取る引数と同じ
.s()で子要素を作り対象の要素を返す
意味:Sisters(姉妹要素)の頭文字
引数はhmc2()の取る引数と同じ
.p()は対象の親要素を返す
意味:Parent(親要素)の頭文字
code:使用例.js
h2("div", {})
.c("h1", { class: "sample" })
.s("タイトル")
.p()
.c("p", {})
.s("本文")
.p();
長い版
code:h2.js
const h2 = (arg1, attributes) => {
if (typeof attributes == "undefined") {
if (arg1 instanceof HTMLElement) {
var element = arg1;
} else {
var element = new Text(arg1);
}
} else {
var element = document.createElement(arg1);
}
for (let q in attributes) {
element.setAttribute(q, attributesq);
}
return element;
};
nit: var→let, let→const？takker.icon
elementがvarなのは条件分岐を抜けた後に使いたいからですbsahd.icon
あーなるほどtakker.icon
それなら冒頭でlet element;を……っと思ったけど、初期化しないの気持ち悪し、一長一短だなー
h2のスコープ外にelementが漏れ出ないなら問題なさそう
関数スコープなので問題ないはずbsahd.icon
svg版
const svg=(e,t)=>{if(void 0===t)if(e instanceof SVGElement)var n=e;else n=new Text(e);else n=document.createElementNS("http://www.w3.org/2000/svg",e);for(let e in t)n.setAttribute(e,t[e]);return n};(()=>{let e=SVGElement.prototype;e.c=function(e,t){return this.appendChild(svg(e,t))},e.s=function(e,t){return this.append(svg(e,t)),this},e.p=function(){return this.parentElement}})();
code:js
(()=>{
let element___proto__ = SVGElement.prototype;
element___proto__.c = function (arg1, attributes) {
return this.appendChild(svg(arg1, attributes));
};
element___proto__.s = function (arg1, attributes) {
this.append(svg(arg1, attributes));
return this;
};
element___proto__.p = function () {
return this.parentElement;
};
})()
const svg = (arg1, attributes) => {
if (typeof attributes == "undefined") {
if (arg1 instanceof SVGElement) {
var element = arg1;
} else {
var element = new Text(arg1);
}
} else {
var element = document.createElementNS("http://www.w3.org/2000/svg",arg1);
}
for (let q in attributes) {
element.setAttribute(q, attributesq);
}
return element;
};
✂ to DOM生成用便利ツール:実例(SVG)
code:old.js
if (typeof arg1 === "string" || arg1 instanceof String) {
instanceof Stringしているのはなぜだろうtakker.icon
まさかstringとStringって違うobjectだったりする？
そんなやばいケース、現代にあるのか……？
new TextがStringクラスに対応してるのでbsahd.icon
Object.prototype.toString.call(arg1) == "[object String]"でいいのか
{}.toString.call(arg1) == "[object String]"に略せる
cf. JS Is Weird#66e2be1273e5220000c6c78c
逆ならarg1 instanceof HTMLElement
prototype拡張とはなかなか大胆なことをしてるな、という印象takker.icon
元のHTMLElement自体を書き換えているわけではないから、それほど問題にはならないのかな
prototype汚染になっていないのならまあ良さそう
HTMLElement自体を書き換えていますbsahd.icon
メッソドチェーンよりDOM生成用便利ツール#673b343471b3c200007ed92cみたいに引数内に収まってるほうがフォーマッターで階層がわかりやすくなるし...
実際preactのh()だってこの形式なんだよな～
えっまじ？takker.icon
んー、https://github.com/preactjs/preact/blob/10.24.3/src/create-element.js を見る限りはprototype使ってなさそうですが
あ、method chainではなく函数で表現しているほうのことか
それは同意します